<template>
	<view class="account-info">
		<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
			<u-form-item class="form-item" label="店铺类型" labelWidth="120">
				<u-radio-group v-model="formData.base_info.user_type" @change="storeTypeChange">
					<u-radio v-for="(item,index) in storeTypeList" :key="index" :name="item.value" :label="item.name"
						:disabled="item.disabled"></u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="form-item" label="商户类型" labelWidth="120" v-if="infoType==1">
				<u-radio-group v-model="formData.base_info.merchant_type" @change="merchantTypeChange">
					<u-radio v-for="(item,index) in merchantTypeList" :key="index" :name="item.value" :label="item.name"
						:disabled="item.disabled"></u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="form-item" label="商户简称" label-width="120" v-if="infoType==1">
				<uni-easyinput border="bottom" type="text" v-model="formData.base_info.merchant_short_name"
					placeholder="请输入商户简称"></uni-easyinput>
			</u-form-item>
			<u-form-item class="form-item" label="联系人" label-width="120">
				<uni-easyinput border="bottom" type="text" v-model="formData.base_info.contact_name"
					placeholder="请输入联系人"></uni-easyinput>
			</u-form-item>
			<u-form-item class="form-item" label="联系手机号" label-width="120">
				<uni-easyinput border="bottom" type="number" v-model="formData.base_info.contact_phone"
					placeholder="请输入联系手机号"></uni-easyinput>
			</u-form-item>
			<u-form-item class="form-item" label="联系邮箱" label-width="120">
				<uni-easyinput border="bottom" type="text" v-model="formData.base_info.email"
					placeholder="请输入联系邮箱"></uni-easyinput>
			</u-form-item>
			<u-form-item class="form-item" label="门头名称" label-width="120">
				<uni-easyinput border="bottom" type="text" v-model="formData.base_info.store_name"
					placeholder="请填写门头名称"></uni-easyinput>
			</u-form-item>

			<u-form-item class="form-item" label="行业类目" labelWidth="120" v-if="infoType==1">
				<!-- <uni-easyinput border="bottom" @click="showPicker=true"
					v-model="formData.base_info.unity_category_id_name" disabledColor="transparent"
					placeholder="请选择经营类目">
				</uni-easyinput> -->
				<uni-data-select v-model="formData.base_info.unity_category_id" placeholder="请选择经营类目" :localdata="leimu"
					@change="leimuConfirm"></uni-data-select>
			</u-form-item>

			<view v-if="infoType==0">
				<u-form-item class="form-item" label="保证金" label-width="120" v-if="earnestData.earnest_switch">
					<uni-easyinput border="bottom" v-model="earnestData.earnest_money" disabled
						style="color: red;"></uni-easyinput>
				</u-form-item>

				<view v-if="earnestData.earnest_switch && earnestData.earnest_money_desc" class="earnest-money-desc">
					保证金说明：{{earnestData.earnest_money_desc}}
				</view>
			</view>

			<view class="identify" style="padding-bottom: 20rpx;" v-if="formData.audit_opinion">
				<view class="name">管理员审核备注</view>
				<uni-easyinput border="bottom" disabled v-model="formData.audit_opinion" type="textarea" />
			</view>
		</u-form>

		<label class="protocol">
			<radio :checked="formData.checked" @click="agree()" />
			<text style="font-size: 28rpx;">同意</text>
			<text style="font-size: 28rpx;color:#125cd7" v-if="infoType==0"
				@click="pageRoute('/pages/agreement/agreement?type=merchant')">
				《门店入驻协议》
			</text>
			<text style="font-size: 28rpx;color:#125cd7" v-if="infoType==1"
				@click="pageRoute('/pages/agreement/agreement?type=merchant')">
				《商户入驻协议》
			</text>
		</label>

		<view class="opt-btn">
			<button type="primary" @click="stepHandle(1)">下一步</button>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		onMounted,
		reactive,
		toRefs,
		defineProps,
		ref
	} from 'vue';

	defineOptions({
		name: 'account-info'
	});

	onMounted(() => {
		console.log('组件已挂载');
		// 这里可以执行需要在DOM挂载后执行的代码
		if (props.infoType == 1) {
			getLeimu();
		}
	});

	const props = defineProps({
		earnestData: Object,
		infoType: {
			type: Number,
			default: 0, // 1商户，0门店
		},
		formData: {
			type: Object,
			default () {
				return {
					checked: false,

					base_info: {
						merchant_type: 2, // 商户类型
						merchant_short_name: '', // 商户简称
						user_type: 1, // 店铺类型
						contact_name: "", // 联系人
						contact_phone: "", // 手机号
						email: '', // 邮箱
						store_name: "", // 店铺名称
						category_id: 0, // 店铺分类ID
						unity_category_id: 0, // 行业类目ID
						remark: '', // 备注
					},
				}
			}
		}
	})

	const state = reactive({
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		storeTypeList: [{
			value: 1,
			name: '联盟商家',
			disabled: true,
		}, {
			value: 2,
			name: '加盟水站',
			disabled: true,
		}],
		merchantTypeList: [{
			value: 1,
			name: '小微',
			disabled: true,
		}, {
			value: 2,
			name: '企业',
			disabled: false,
		}, {
			value: 3,
			name: '个体',
			disabled: false,
		}],

		showPicker: false, // 控制行业类目
		leimu: [], // 类目列表
	});

	const rules = ref([]);
	const formRef = ref();

	const emits = defineEmits(["changeStep", "update:formData"]);

	function storeTypeChange(e) {
		console.log('店铺类型', e);
	}

	function merchantTypeChange(e) {
		console.log('商户类型', e);
	}

	// 获取行业类目
	function getLeimu() {
		request.get("boxpay/getBusinessMcc", {})
			.then(res => {
				res.data.forEach(item => {
					state.leimu.push({
						value: item.code,
						text: item.name,
					})
				})
			});
	}

	// 确认类目
	function leimuConfirm(e) {
		props.formData.base_info.unity_category_id = e;
		emits('update:formData', props.formData);
	}

	// 同意协议
	function agree() {
		props.formData.checked = !props.formData.checked;
		emits('update:formData', props.formData);
	}

	// 下一步
	function stepHandle(step) {
		console.log('下一步', step, props.formData.checked);
		// 验证数据
		let msg = '请先阅读并同意门店入驻协议';
		if (props.infoType == 1) {
			msg = '请先阅读并同意商户入驻协议';
		}
		if (!props.formData.checked) {
			util.showTip(msg);
			return;
		}
		let check = checkData();
		if (!check) {
			return;
		}
		props.formData.base_info.user_type = 1 //用户类型，商家
		emits('update:formData', props.formData);
		emits('changeStep', step);
	}

	function checkData() {
		console.log('商户类型', props.formData.base_info.merchant_type);
		console.log('店铺类型', props.formData.base_info.user_type);
		console.log('行业类目', props.formData.base_info.unity_category_id);
		if (props.infoType == 1) {
			if (!util.username(props.formData.base_info.merchant_short_name, '商户名称')) {
				return false;
			}
			if (!util.username(props.formData.base_info.unity_category_id, '行业类目')) {
				return false;
			}
		} else {

		}
		if (!util.username(props.formData.base_info.contact_name, '联系人')) {
			return false;
		}
		if (!util.mobile(props.formData.base_info.contact_phone, '联系手机号')) {
			return false;
		}
		if (!util.email(props.formData.base_info.email)) {
			return false;
		}
		if (!util.username(props.formData.base_info.store_name, '门头名称')) {
			return false;
		}
		return true;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	};

	const {
		themeColor,
		imgHost,
		storeTypeList,
		merchantTypeList,
		showPicker,
		leimu,
	} = toRefs(state);
</script>

<style lang="scss">
	.account-info {
		.form {
			margin-top: 24rpx;
			padding: 0 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.earnest-money-desc {
				color: red;
				font-size: 24rpx;
				text-align: center;
			}

			.identify {}
		}

		.protocol {
			display: flex;
			align-items: center;
			padding: 24rpx 0;

			.links {
				flex: 1;

				.u-link {
					display: inline-block;
				}
			}
		}

		.opt-btn {
			display: flex;
			flex-direction: row;
			justify-content: space-around
		}
	}
</style>